<html lang="en">

<body>
    <div id="div1" style="background-color: red;">
    </div>
    <div id="div2" style="background-color: rebeccapurple;">
    </div>
    <div id="div3" style="background-color: pink">
        <h2>插入位置上方</h2>
        <p id="p1"></p>
        <span id="span1">需要删除的内容</span>
    </div>
    <ul>
        <li>11</li>
        <li id="苹果">21</li>
        <li>31</li>
    </ul>
    <script>
        let myDiv1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>div1创建内容</p>"
        let myEle = document.createElement("h1")
        myEle.innerHTML = "myEle创建内容"
            // div1.appendChild(div1)
        div1.append(myEle)
            // append:可以插入多个元素，而且可以直接插入文本（但是不支持渲染）
        div1.prepend("00000")
        let myEle1 = document.createElement("p")
        myEle1.innerHTML = "myEle1创建"
        div2.append(myEle, myEle1)
        div2.append("div2的append插入")
            // 插入元素：insertBefore
        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "这是h3样式标题"
        let myDiv = document.querySelectorAll("div")
        console.log(myDiv)
            // 第一个参数是插入节点，第二个参数是参考位置
            //myDiv[2].insertBefore(myEle2, p1)
        p1.before(myEle2) //在p1前面插入myEle2
        let myEle3 = document.createElement("h4")
            //简单删除remove
        let span1 = document.getElementById("span1")
        span1.remove()
            //复杂删除delete
            //1.获取元素（总要）
        let list = document.getElementsByTagName("ul")
        console.log(list)
            //children是得到的list的集合所以不能改
            //list[0].children.innerHTML="猕猴桃"

        // for (item of list[0].children) {
        //     item.innerHTML = "猕猴桃"
        // }

        //firstElementChild是获取第一个元素，nextSibiling是获取下一个元素
        console.log(list[0].firstElementChild.nextSibling)
        list[0].children[0]

        console.log(p1.parentElement)


        // let li = document.getElementById("苹果")
        // li.remove()

        let li1 = list[0];
        li1.removeChild(li1.children[1]); //复杂删除
    </script>
</body>

</html>